<template>
  <div class="shopcar-container">
    <div class="goods-list">
      <!-- 上面部分 -->
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
              <mt-switch v-model="$store.getters.getGoodsSelected[1]" @change="selectedChange(1,$store.getters.getGoodsSelected[1])"></mt-switch>
              <img src="https://img.alicdn.com/tps/i4/TB1QtfYN3HqK1RjSZJnSuvNLpXa.jpg_250x250Q90.jpg_.webp" alt="">
              <div class="info">
                  <h3>华为P30 Pro</h3>
                  <p>
                      <span class="price">￥5488</span>
                      <numbox :initcount="$store.getters.getGoodsCount[1]"></numbox>
                      <a href="#">删除</a>
                  </p>
              </div>
              
          </div>
        </div>
      </div>
      <!-- 下面部分 -->
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner jiesuan">
              <div class="left">
                  <p>总计（不含运费）</p>
                  <p>已勾选商品<span class="red">0</span>件，总价<span class="red">￥0</span></p>
              </div>
              <mt-button type="danger">去结算</mt-button>
          </div>
        </div>
      </div>
    </div>
  
  </div>          
</template>

<script>
import numbox from "../subcomponents/shopcar_numbox.vue"
export default{
    data(){
        return{
            
        }
    },
    methods:{
        selectedChange(id,val){
            this.$store.commit('updateGoodsSelected',{id:1,selected:val})
        }
    },
    components:{
        numbox
    }
}
</script>

<style lang="less" scoped>
.shopcar-container{
    background-color: #eee;
    overflow: hidden;
    .goods-list{
        .mui-card-content-inner{
            display: flex;
            align-items: center;
        }
        img{
            width: 60px;
            height: 60px;
        }
        h3{
            font-size: 13px;
            margin: 10px 0;
            text-align: center;
        }
        .info{
            .price{
                color: red;
                font-weight: bold;
            }
        }
    }
    .jiesuan{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .red{
            color: red;
            font-size: 16px;
            font-weight: bold;
        }
    }
}

</style>